<template>
  <div class="selectIdentity-container" ref="selectIdentity">
    <div class="selectWrap">
      <div class="btnWrap">
        <el-button type="primary" @click="logOut">退出登录</el-button>
      </div>
      <div class="wrap">
        <div class="wrapHead c409">选择账户类型</div>
        <div class="wrapContainer">
          <div style="min-height:100px;" v-if="list.length > 0" v-loading="loading">
            <div class="wrapCardBox" :class="[selectMer.id === item.id ? 'wrapCard-act' : 'wrapCard']" v-for="(item, index) in list" :key="index" @click="goto(item)">
              <div class="p-tb30-lr20">
                <div class="line-image">
                  <image v-if="setShow(item.showUserType)" :src="setSrc(item.showUserType)" width="46px" height="46px"></image>
                </div>
                <div class="line-conten">
                  <div class="haruyuki-flex haruyuki-ai-c">
                    <div class="label">{{ setName(item) }}</div>
                    <div :class="setColor(item.showUserType)" v-if="setShow(item.showUserType)">{{ setTab(item.showUserType) }}</div>
                  </div>
                  <div class="line-color haruyuki-flex" v-if="item.showUserType === 3 || item.showUserType === 4 || item.showUserType === 5 || item.showUserType === 6">
                    所属商户：{{ item.rpiName }}
                  </div>
                  <div class="line-color haruyuki-flex" v-if="item.showUserType === 4 || item.showUserType === 6">
                    所属门店：{{ item.rpsName }}
                  </div>
                  <div class="line-color haruyuki-flex">
                    状态：{{ setIsOnName(item.isOn) }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="emptyWrap" v-if="list.length < 1">
            <div class="empty">暂无数据</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { queryRpiList } from "@/api/page/login/selectIdentity";
import { mapGetters } from "vuex";
import { resetRouter } from '@/router/router'

export default {
  name: "selectIdentity",
  data() {
    /**
       * userMerchantType 1. 集团商户 2.商户 3.门店 4.收银员
       * showUserType 1.集团商户 2.商户 3.门店 4.收银员 5.商户管理员 6.门店管理员
       */
    return {
      list: [],
      loading: false
    };
  },
  computed: {
    ...mapGetters(['selectMer', 'tagWel']),
    setTab() {
      return (showUserType) => {
        if (showUserType === 1) {
          return '集团商户';
        } else if (showUserType === 2) {
          return '商户';
        } else if (showUserType === 3) {
          return '门店';
        } else if (showUserType === 4) {
          return '收银员';
        } else if (showUserType === 5) {
          return '商户管理员';
        } else if (showUserType === 6) {
          return '门店管理';
        }
      };
    },
    setName() {
      return (item) => {
        if (item.showUserType === 1 || item.showUserType === 2) {
          return item.rpiName;
        } else if (item.showUserType === 3) {
          return item.rpsName;
        } else if (item.showUserType === 4 || item.showUserType === 5 || item.showUserType === 6) {
          return item.rpstName;
        } else {
          return '';
        }

      };
    },
    setShow() {
      return (showUserType) => {
        if (showUserType === 1 || showUserType === 2 || showUserType === 5) {
          return true;
        } else if (showUserType === 3 || showUserType === 6) {
          return true;
        } else if (showUserType === 4) {
          return true;
        } else {
          return false;
        }
      };
    },
    setColor() {
      return (showUserType) => {
        if (showUserType === 1 || showUserType === 2 || showUserType === 5) {
          return 'haruyuki-label-green';
        } else if (showUserType === 3 || showUserType === 6) {
          return 'haruyuki-label-blue';
        } else if (showUserType === 4) {
          return 'haruyuki-label-orange';
        }
      };
    },
    setSrc() {
      return (showUserType) => {
        if (showUserType === 1 || showUserType === 2 || showUserType === 5) {
          return '/img/manage/merchant.png';
        } else if (showUserType === 3 || showUserType === 6) {
          return '/img/manage/store.png';
        } else if (showUserType === 4) {
          return '/img/manage/cashier.png';
        }
      };
    },
    setIsOnName() {
      return (val) => {
        if (val === 0) {
          return '禁用';
        } else if (val === 1) {
          return '启用';
        } else {
          return ''
        }
      };
    }

  },
  created() {
    this.getList()
  },
  methods: {
    /* 退出登录 */
    logOut() {
      this.$confirm(this.$t("logoutTip"), this.$t("tip"), {
        confirmButtonText: this.$t("submitText"),
        cancelButtonText: this.$t("cancelText"),
        type: "warning"
      }).then(() => {
        this.$store.dispatch("LogOut").then(() => {
          resetRouter();
          this.$router.push({ path: "/login" });
        });
      });
    },
    /* 角色数据 */
    getList() {
      // const account = this.userInfo.account;
      this.loading = true;
      queryRpiList().then(res => {
        this.list = res.data.data;
        this.loading = false;
      }), () => {
        this.loading = false;
      }
    },
    /* 页面跳转 */
    goto(item) {
      this.$store.dispatch('act_selectMer', item)
      if (item.rpiNo) {
        this.$router.push({ path: this.tagWel.value });//跳转首页
      } else {
        this.$message.error('此条数据没有商户号，请选择其他商户！！！');
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.wrapCardBox {
  display: inline-block;
  width: 46%;
  margin: 0 2%;
  box-sizing: border-box;
  cursor: pointer;
}

.wrapCard {
  border-radius: 10px;
  margin-bottom: 15px;
  border: 2px solid #F4F4F4;
}

.wrapCard-act {
  border-radius: 10px;
  margin-bottom: 15px;
  border: 2px solid #2371FE;
}

.p-tb30-lr20 {
  padding: 15px 10px;
}

.selectIdentity-container {
  background-color: #fff;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  // overflow: hidden;
  overflow-y: auto;
  // padding-top: 280px;
}

.btnWrap {
  padding: 20px 10px;
  width: 1020px;
  display: flex;
  justify-content: flex-end;
  align-content: flex-start;
  position: fixed;
  background: #fff;
}

.wrap {
  width: 1000px;
  -webkit-box-shadow: -4px 5px 10px rgba(0, 0, 0, 0.4);
  box-shadow: -4px 5px 10px rgba(0, 0, 0, 0.4);
  padding: 20px;
  padding-bottom: 40px;
  margin-top: 200px;

  .wrapHead {
    font-size: 28px;
    padding-bottom: 20px;
  }


}

.wrapContainer {
  height: 450px;
  overflow-y: scroll;
}

.emptyWrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  font-size: 18px;
}



.w10 {
  width: 10% !important;
}

.mrgin-b-62 {
  margin-bottom: 30px;
}

.btn-bottom {
  height: 40px;
  padding-top: 10px;
}

.border-act {
  border-radius: 10rpx;
  border: 2rpx solid #2371FE;
  margin-bottom: 20rpx;
}

.border {
  border-radius: 5px;
  border: 1px solid #F4F4F4;
  margin-bottom: 10px;
}

.role-item {
  padding-left: 14px;

  .label {
    height: 14px;
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    line-height: 14;
    padding-bottom: 8px;
  }

  .desc {
    height: 12px;
    font-size: 12px;
    color: #999999;
    line-height: 12;
  }

}

.padding-20 {
  padding: 10px;
}

.label {
  height: 14px;
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  line-height: 14px;
  padding-right: 10px;
}

.line-conten {
  padding-left: 10px;
  width: 100%;

  .line-color {
    font-size: 12px;
    color: #999999;
    padding-top: 8px;
  }

  .line-colors {
    font-size: 12px;
    color: #999999;
    padding-top: 4px;
  }
}


/* haruyuki label-color */
.haruyuki-label-blue {
  padding: 5px;
  border-radius: 4px;
  font-size: 10px;
  color: #4663fd;
  background-color: rgba(70, 99, 253, 0.1);
}

.haruyuki-label-green {
  padding: 5px;
  border-radius: 4px;
  font-size: 10px;
  color: #07c283;
  background-color: rgba(7, 194, 131, 0.1);
}

.haruyuki-label-orange {
  padding: 5px;
  border-radius: 4px;
  font-size: 10px;
  color: #ed7e12;
  background-color: rgba(237, 126, 18, 0.1);
}

.haruyuki-flex {
  display: flex;
}

.haruyuki-ai-c {
  align-items: center;
}</style>
